<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鲜花列表</title>
    <link rel="stylesheet" type="text/css" href="../css/element-plus.index.css">
    <script type="text/javascript" src="../js/vue.global.3.2.39.js"></script>
    <script type="text/javascript" src="../js/element-plus.2.2.15.js"></script>
    <script type="text/javascript" src="../js/element_plus_icons.2.0.9.js"></script>
    <script type="text/javascript" src="../js/axios.min.0.24.0.js"></script>
    <style>
        .el-row {
            margin-bottom: 20px;
        &:last-child {
             margin-bottom: 0;
         }
        }
        .el-col {
            border-radius: 4px;
        }
        .bg-purple-dark {
            background: #99a9bf;
        }
        .bg-purple {
            background: #d3dce6;
        }
        .bg-purple-light {
            background: #e5e9f2;
        }
        .grid-content {
            border-radius: 4px;
            min-height: 36px;
            text-align: center;
            line-height: 36px;
            overflow: hidden;
        }
        .row-bg {
            padding: 10px 0;
            background-color: #f9fafc;
        }
    </style>
</head>
<body>
<div id="app">
    <el-breadcrumb separator="/">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>鲜花列表</el-breadcrumb-item>
    </el-breadcrumb>
    <hr>
    <el-row>
        <el-col :span="4"><div class="grid-content bg-purple">ID</div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light">鲜花名称</div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple">价格</div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light">简介</div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple">图片</div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light">操作</div></el-col>
    </el-row>
    <el-row v-for="item in foodList" :key="item.foodId">
        <el-col :span="4"><div class="grid-content bg-purple">{{ item.foodId }}</div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light">{{ item.foodName }}</div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple">{{ item.price }}</div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light">{{ item.remarks }}</div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple"><img :src="item.baseImg" style="width: 25px;height:25px;"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light"><a :href="'/foods/deletflowers/'+item.foodId">删除</a></div></el-col>
    </el-row>

</div>
<script>
    const App = {
        data() {
            return {
                foodList: []
            };
        },
        methods: {
            loadCategoryList() {
                axios.get('/foods/foodall').then(resp => {
                    this.foodList = resp.data; // 假设 API 返回的数据在 data 属性中
                    this.foodList=this.foodList.data;
                    console.log(this.foodList);
                }).catch(error => {
                    console.error('Error fetching data:', error);
                });
            }
        },
        mounted() {
            this.loadCategoryList(); // 在组件挂载后加载数据
        }
    };

    const app = Vue.createApp(App);
    app.use(ElementPlus);
    app.mount("#app");
</script>
</body>
</html>